<template>
	<s-layout title="素材管理">
		<su-sticky bgColor="#fff">
			<uni-search-bar placeholder="搜索关键字" radius="27" @confirm="search" @cancel="search" />
			<view class="tab-box">
				<view :class="state.categoryTab==1?'active-tab':''" @click="changeCategoryTab(1)">
					素材管理
				</view>
				<view :class="state.categoryTab==2?'active-tab':''" @click="changeCategoryTab(2)">
					评价管理
				</view>
			</view>
			<su-tabs :list="state.tabs" lineColor="#3A43FF" :scrollable="false" @change="changeTab"
				:current="state.activeTab"></su-tabs>
		</su-sticky>
		<view class="content">
			<view class="card" v-for="item in state.list" :key="item.id">
				<view class="user-box">
					<img :src="sheep.$url.cdn(item.user_avatar)"  alt="" class="avatar" />
					<view class="user">
						<view class="name">{{item.user_nickname}}</view>
					</view>
				</view>
				<view class="desc">
					<view class="desc-title">
						{{item.title}}
					</view>
					{{item.content}}
				</view>
				<uni-grid :column="3" :showBorder="false" :square="false" :highlight="false">
					<uni-grid-item v-for="(image,index) in item.images" :key="index">
						<su-image class="message-img" isPreview :previewList="item.images" :current="index" :src="image"
							:height="200" :width="200" mode="aspectFill"></su-image>
					</uni-grid-item>
				</uni-grid>
				<view class="goods-box" @click="sheep.$router.go('/pages/goods/index', {id: item.id,})">
					<image class="goods-img" :src="sheep.$url.cdn(item.goods_image)"  mode=""></image>
					<view class="goods-name">{{item.goods_name}}</view>
				</view>
				<view class="operate">
					<button class="ss-reset-button more" @tap.stop="">
						更多
					</button>
					<view class="btns">
						<!--            <button class="ss-reset-button" @tap.stop="">-->
						<!--              备注-->
						<!--            </button>-->
						<button class="ss-reset-button shipping" @tap.stop="">
							立即推荐
						</button>
					</view>
				</view>
			</view>
		</view>

		<uni-load-more v-if="state.list.length > 0" :status="state.loadStatus" :content-text="{
		    contentdown: '上拉加载更多',
		  }" @tap="loadmore" />
		<s-empty v-if="state.list.length === 0" icon="/static/soldout-empty.png" text="暂无商品">
		</s-empty>

	</s-layout>
</template>

<script setup>
import {
	reactive
} from 'vue';
import {
	onLoad,
	onShow,
	onReachBottom
} from "@dcloudio/uni-app"
import sheep from '@/sheep';

const state = reactive({
	categoryTab: 1,
	keyword: "",
	activeTab: 0,
	tabs: [{
		name: '全部',
	}, {
		name: '已推荐',
	}, {
		name: '未推荐',
	}],
	list: [],
	page: 1,
	pageSize: 20,
	loadStatus: 'noMore',
})

function changeCategoryTab (value) {
	state.categoryTab = value;
	emptyList();
	getList();
}

function search (e) {
	state.keyword = e.value;
	emptyList();
	getList();
}

function changeTab (value) {
	state.activeTab = value.index;
	emptyList();
	getList();
}

async function getList () {
	state.loadStatus = 'loading';
	const info = {
		keyword: state.keyword,
		p: state.page,
		pagesize: state.pageSize
	}
	let res = {}
	if (state.categoryTab == 1) {
		res = await sheep.$api.material.sourceScList(info);
	} else {
		res = await sheep.$api.material.commentList(info);
	}
	if (res.code === 1) {
		let newArr = res.data
		let initArr = state.list ? state.list : []
		const lastListNum = newArr.length
		if (state.page == 1) {
			state.list = res.data
		} else {
			state.list = initArr.concat(newArr)
		}
		if (lastListNum < state.pageSize) {
			state.loadStatus = 'noMore';
		} else {
			state.loadStatus = 'more';
		}
	}
}

function emptyList () {
	state.page = 1;
	state.list = [];
	state.loadStatus = 'noMore';
}

// 加载更多
function loadmore () {
	if (state.loadStatus !== 'noMore') {
		state.page++;
		getList();
	}
}

onLoad((options) => {
	getList();
});

// 上拉加载更多
onReachBottom(() => {
	loadmore();
});
</script>

<style lang="scss" scoped>
.content {
	padding: 0 28rpx;
	// margin-top: 100rpx;
}

.card {
	background-color: #fff;
	border-radius: 16rpx;
	margin: 28rpx 0;
	padding: 26rpx 24rpx;

	.user-box {
		display: flex;
		align-items: center;
	}

	.avatar {
		width: 80rpx;
		height: 80rpx;
		background-color: #ccc;
		border-radius: 50%;
	}

	.user {
		// display: flex;
		// flex-direction: column;
		// justify-content: space-between;
		padding: 5rpx 20rpx;
		font-size: 24rpx;
		color: #999999;

		.name {
			font-weight: bold;
			font-size: 28rpx;
			color: #111827;
		}
	}

	.desc {
		font-size: 26rpx;
		color: #666666;
		margin: 20rpx 0;

		.desc-title {
			font-weight: bold;
			font-size: 28rpx;
			color: #272636;
			margin-bottom: 12rpx;
		}
	}

	.goods-box {
		display: flex;
		align-items: center;
		background: #F7F7F7;
		margin-top: 20rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 24rpx 50rpx;

		.goods-img {
			width: 110rpx;
			height: 110rpx;
			border-radius: 20rpx;
			margin-right: 25rpx;
			background-color: #ccc;
		}

		.goods-name {
			flex: 1;
			font-weight: bold;
			font-size: 30rpx;
			color: #1A1A1A;
		}

	}

	.uni-grid-item {
		box-sizing: border-box;
		padding: 10rpx;
	}

	.operate {
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;
		font-weight: 400;
		font-size: 24rpx;
		color: #1A1A1A;

		.more {
			width: 100rpx;
		}

		.btns {
			display: flex;
			justify-content: end;
			flex: 1;

			>button {
				border-radius: 100rpx;
				width: 166rpx;
				height: 66rpx;
				line-height: 66rpx;
				text-align: center;
				background: #F7F7F7;
				border-radius: 38rpx 38rpx 38rpx 38rpx;
				margin-left: 20rpx;
			}

			.shipping {
				color: #fff;
				background: linear-gradient(90deg, #6780FF 0%, #3A43FF 100%);
			}
		}
	}
}

.tab-box {
	width: 90%;
	height: 66rpx;
	background: #F7F7F7;
	border-radius: 98rpx 98rpx 98rpx 98rpx;
	margin: 20rpx auto;
	display: flex;
	align-items: center;
	justify-content: space-around;

	>view {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-around;
		height: 100%;
		font-size: 26rpx;
		color: #333333;
	}

	.active-tab {
		background: #3A43FF;
		border-radius: 98rpx 98rpx 98rpx 98rpx;
		color: #fff;
	}
}
</style>